<script setup lang="ts">
import { ref, defineEmits, onUnmounted } from "vue"
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag: boolean) => {
  emit('changeHeaderCSS', flag);
}
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)      
      if (browerWidth < 1200) {
        changeHeaderCSS(true)
      }
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
let bannerHeight = ref(browerWidth * 0.42)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
let nav = ref(browerWidth < 768);
const listenerReSize = () => {
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if (browerWidth < 1200) {
    //头部菜单变为图标
    changeHeaderCSS(true)
  } else {
    // 头部图标变为菜单
    changeHeaderCSS(false)
  }
  if (browerWidth < 768) {
    nav.value = true
  } else {
    nav.value = false
  }
  bannerHeight.value = browerWidth * 0.42;
}
window.addEventListener('resize', listenerReSize);
onUnmounted(() => {
  window.removeEventListener('resize', listenerReSize);
})
</script>

<template>
  <div class="service">
    <div ref="underHeader"></div>
    <div class="s-header">
      <el-row class="s-header-content">
        <el-col :span="6" :xs="24" :sm="24" :md="6" class="font-center" style="margin-bottom: 40px;">
          <span class="ft30 fw3">ABOUT US</span>
        </el-col>
        <el-col :span="18" :xs="24" :sm="24" :md="18">
          <div class="s-right">
            <p class="ft30 title-1">
              关于我们
            </p>
            <p class="title-2">
              ABOUT DOUKU &<br>
              AD DESIGN
            </p>
            <p style="line-height:28px">
              抖酷(douku)独立设计工作室。成立于2023年，立足于文化之都中国北京，是一家拥有国际化视野的专业独立设计工作室。抖酷一直致力于品牌战略策划、品牌视觉设计、品牌空间设计等服务。所服务的客户遍及全国各地，拥有丰富品牌经验。
            </p>
            <p style="line-height:28px">
              我们洞察时代轨迹，以开创性的品牌理念与塑造方法，前沿的商业设计思维，造时代先锋品牌。
            </p>
            <p class="header-bottom fw6 lnh">
              企业使命 — 为创新而生、为不凡努力<br>
              品牌内涵 —“抖”：活力、趣味 ; “酷”：创新、生活态度<br>
              核心价值 — 提升品牌价值，为客户驱动商业可持续增长
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="h700 bg3" :style="{ height: bannerHeight + 'px' }">
    </div>
    <div class="s-header s-header2">
      <el-row class="s-header-content">
        <el-col :span="6" :xs="24" :sm="24" :md="6"></el-col>
        <el-col :span="18" :xs="24" :sm="24" :md="18">
          <div class="s-right">
            <p class="ft30 title-1">
              团队介绍
            </p>
            <p class="title-2">
              ABOUT DOUKU &<br>
              AD DESIGN
            </p>
            <br>
            <p class="wh08b06 team-img">
            </p>
            <br>
            <p style="line-height:28px">
              抖酷是一群热爱设计的年轻人组成的设计团队，趣味的设计风格，新锐的设计理念，用激情与灵感赋予品牌更高的价值!
            </p>
            <p style="line-height:28px">
              抖酷设计，致力于为用户打造年轻且有活力的品牌，做真正为客户提供优秀设计，让设计为品牌带来价值的专业设计公司。为创新而生，为不一样努力，是抖酷设计存在的意义。
            </p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="img-wall">
      <el-row>
        <!-- 1 -->
        <el-col :span="4.8" class="widht20 ">
          <el-row>
            <el-col :span="12">
              <div class="t">
                <img src="http://dtxb.work/doukuneed/undefined0.png" width="100%">
              </div>
            </el-col>
            <el-col :span="12">
              <div class="t">
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="t">
              </div>
            </el-col>
            <el-col :span="12">
              <div class="t">
                <img src="http://dtxb.work/lcl2.jpg" width="100%">
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 2 -->
        <el-col :span="4.8" class="widht20">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/lcl.png" width="100%">
          </div>
        </el-col>
        <!-- 3 -->
        <el-col :span="4.8" class="widht20">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/img-wall.png" width="100%">
          </div>
        </el-col>
        <!-- 4 -->
        <el-col :span="4.8" class="widht20">
          <el-row>
            <el-col :span="12">
              <div class="t">
                <img src="http://dtxb.work/xs.jpg" width="100%">
              </div>
            </el-col>
            <el-col :span="12">
              <div class="t">

              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="t">

              </div>
            </el-col>
            <el-col :span="12">
              <div class="t">
                <img src="http://dtxb.work/ql.jpg" width="100%">
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 5 -->
        <el-col :span="4.8" class="widht20">
          <el-row>
            <el-col :span="12">
              <div class="t">
                <img src="https://dtxb.work/un5.jpg" width="100%">
              </div>
            </el-col>
            <el-col :span="12">
              <div class="t">

              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="t">

              </div>
            </el-col>
            <el-col :span="12">
              <div class="t">
                <img src="https://dtxb.work/un4.jpg" width="100%">
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- row 3 -->
      <el-row>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="https://dtxb.work/un1.jpg" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/gpq.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/wxh.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t" style="background-color: #1F1F1F;">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/zy.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t" style="background-color: #262626;">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/zxz.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">

          </div>
        </el-col>
      </el-row>
      <!-- row 4 -->
      <el-row>
        <el-col :span="2.4" class="width10">
          <div class="t">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="https://dtxb.work/un2.jpg" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t" style="background-color: #4C4C4C;">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/smy.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t" style="background-color: #333;">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/undefined.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t" style="background-color: #4C4C4C;">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="http://dtxb.work/doukuneed/hxx.png" width="100%">
          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">

          </div>
        </el-col>
        <el-col :span="2.4" class="width10">
          <div class="t">
            <img src="https://dtxb.work/un3.jpg" width="100%">
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="s-header s-header2 s3">
      <el-row class="s-header-content">
        <el-col :span="6" :xs="24" :sm="24" :md="24" :lg="6"></el-col>
        <el-col :span="18" :xs="24" :sm="24" :md="24" :lg="18">
          <!-- 标题 -->
          <div>
            <p class="ft30 title-1">
              工作环境
            </p>
            <p class="title-2 t22" style="margin-top: 30px;">
              WORK
            </p>
            <p class="title-2 t22" v-if="nav" style="margin-bottom: 30px;">
              ENVIRONMENT
            </p>
          </div>
          <div class="we-grid" style="margin-top: 30px;" v-if="nav">
            <div class="one">1</div>
            <div class="two">2</div>
            <div class="four">4</div>
            <div class="five">5</div>
          </div>
          <div class="we-grid"  v-else>
            <div class="title-2 t22 one">ENVIRONMENT</div>
            <div class="two">2</div>
            <div class="three">3</div>
            <div class="three-2" >3</div>
            <div class="four">4</div>
            <div class="five">5</div>
            <div class="six">6</div>
            <div class="seven">7</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background-color: #000;
}

.col2,
.col3 {
  padding: 0 10px 0 0;
}

.col3 {
  padding: 10px 10px 0 0;
}

.widht100 {
  width: 100%;
}

.img-wall {
  width: 100%;

  .widht20 {
    width: 20%;
  }

  .width10 {
    width: 10%;
  }
}
.t22{
  margin-bottom: 0 !important;
}

.s-header {
  padding: 140px 10%;
  color: #585656;

  .s-header-content {
    height: 100%;

    .s-right {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      p {
        margin-bottom: 20px;
      }

      .header-bottom {
        font-size: 24px;
        line-height: 40px;
      }
    }
  }
}

.mb50 {
  margin-bottom: 50px;
}



.wh1b08 {
  width: 100%;
  height: 0;
  padding-bottom: 80%;
  background-color: #000;
}

.wh1b120 {
  width: 100%;
  height: 0;
  padding-bottom: 120%;
  background-color: #000;
}

.ssss {
  display: flex;
  flex-direction: column;
  justify-content: right;
}

.wh08b06 {
  width: 80%;
  height: 0;
  padding-bottom: 50%;
  background-color: #000;
}

.lnh {
  line-height: 2;
}
.we-grid {
  display: grid;
  grid-template-rows:  minmax(110px, auto) minmax(110px, auto) minmax(220px, auto) minmax(220px, auto);
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  grid-gap: 10px;
  grid-auto-flow: column;
  .one {
    grid-column-start: 1;
    grid-column-end: 2;
    // background: #19CAAD;
  }
  .two { 
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    /*   如果有重叠，就使用 z-index */
    z-index: 1;
    background: #8CC7B5;
  }
  .three {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    background: #D1BA74;
  }  
  .three-2 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #D1BA74;
  }
  .four {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
    background: #BEE7E9;
  }
  .five {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #E6CEAC;
  }
  .six {
    grid-column-start: 3;
    grid-row: 4;
    background: #ECAD9E;
  }
  .seven{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #E6CEAC;

  }
}
@media screen and (max-width: 1200px) {
  .s-header .s-header-content .s-right .header-bottom {
    font-size: 16px;
  }
  .s-header {
    padding: 70px 5%;
  }
  .wh08b06 {
    width: 100%;
    padding-bottom: 50%;
  }
}
@media screen and (max-width: 768px) {
  .we-grid {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    grid-template-rows: repeat(3, minmax(100px, auto));
    grid-gap: 0;
  }
  .we-grid  .five {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #E6CEAC;
  }
  .we-grid  .two {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    /*   如果有重叠，就使用 z-index */
    z-index: 1;
    background: #8CC7B5;
  }
}
</style>